01b — Sizing & Clear Space
Sizing & Clear Space
The logo must always have breathing room around it and must never be reproduced below the minimum legible size. These rules apply to all print, signage, vehicle wraps, and digital applications.

Clear space

The minimum clear space around the logo is equal to X — defined as the height of the letter M in the wordmark. The four yellow Ms below mark the minimum margin on each side. Never let other elements (text, images, page edges) violate this clear space.

Minimum size

Never reduce the logo below these minimums. At smaller sizes legibility breaks and the bicolor system disappears.

Print
Print min preferred
0.6"
1.5 cm
Print min mid
0.3"
7.5 mm
Print min absolute
0.15"
4 mm
Digital
Digital 40px preferred
40 px
Preferred
Digital 20px
20 px
Digital 15px
15 px
Digital 10px minimum
10 px
Absolute min

Sizing & clear space rules

  • ✓ Minimum clear space on all sides = height of the letter M (X).
  • ✓ Print minimum: 0.6" / 1.5 cm preferred · 0.15" / 4 mm absolute minimum.
  • ✓ Digital minimum: 40 px height preferred · 10 px absolute minimum.
  • ✗ Never reduce below the absolute minimum — readability breaks and the bicolor system disappears.
  • ✗ Never let text, images, or page edges violate the clear-space margin.
Logo don'ts
✗ Don't distort or stretch
✗ Don't reduce opacity
✗ Don't use off-brand colors

Logo do's & don'ts

  • ✓ Stacked logo is always the first choice. Use horizontal only when height is constrained.
  • ✓ Bicolor is always preferred over single-color. Single-color only when technically necessary.
  • ✓ Maintain clear space equal to the height of the letter M on all sides.
  • ✗ Never place the logo on a busy background without a clear field.
  • ✗ Never apply drop shadows, outlines, or effects to the logo.
02 — Brand Colors
Color Palette
Three primary brand colors dominate every asset: Candlelight yellow, Asphalt black, and Salt white. Grays are supporting only. Never use blues, purples, or greens outside of functional UI states.
Primary — use most
Secondary — use sparingly

Color rules that never break

  • ✓ White text on Candlelight yellow is allowed — use with caution, check readability.
  • ✓ White logo on Candlelight background is permitted.
  • Never yellow text on white — insufficient contrast for body copy or headlines.
  • ✓ On dark backgrounds: white body text, Candlelight for accents and key words.
  • ✓ Gradients allowed only within palette tones — no out-of-palette colors ever.
03 — Type System
Typography
Brother 1816 is the primary typeface for headlines and brand moments in print and designed assets. Open Sans is the web/digital fallback and body copy font. Headers always use line-height 1.0–1.1 — the Mr. Pave typographic signature.

Font hierarchy

Brother 1816

Primary — headlines, brand moments, print & designed assets

Font files (Drive)

Open Sans

Secondary — body copy, web/digital, when Brother unavailable

Google Fonts
Display / H1
Paving the future.
Brother 1816 / OS 800
clamp(40–72px)
line-height 1.0
tracking -0.03em
Section H2
Our commitment to quality
Brother 1816 / OS 800
clamp(28–48px)
line-height 1.05
Card H3
Project Overview
OS 700 / 22–28px
line-height 1.08
H4
Section heading
OS 700 / 18px / 1.1
Body
We deliver reliable, high-quality paving solutions for residential and commercial clients across Virginia. All materials backed by our standard 1-year warranty.
Open Sans 400
16px / 1.6
Caption
Last updated June 2026 · Rev. 1.0
OS 600 / 12px / UC
tracking 0.04em
Eyebrow
Commercial Services
OS 700 / 11px / UC
tracking 0.06em
04 — Data Visualization
Charts & Graphs
All data visualizations use the Mr. Pave brand palette exclusively. Charts are flat design — no 3D effects, no gradients outside the defined tints. Use Candlelight yellow as the primary data accent, Asphalt black for strong contrast, and gray scale for supporting series.

Approved data colors — tints & variations of brand palette

Chart style examples

50% Primary
Donut / Pie chart
Primary segment — Candlelight
Secondary — Asphalt
Tertiary — Gray
Q1 Q2 Q3 Q4 Q5
Bar chart
Solid fills only — Candlelight for key bars, gray scale for supporting data. No 3D effects.
Jan Feb Mar Apr May
Line / Area chart
Candlelight line with 15% opacity fill. Black dots with yellow stroke. No gradients on lines.
Data table style
Location Jobs %
Lynchburg 142 48%
Northern VA 98 33%
Virginia Beach 57 19%
Total 297 100%
Header row: Asphalt bg / Yellow text · Key row: Candlelight bg / Black text · Alt rows: Off / White
Approved gradients
Candlelight → Light tint #FFDE17 → #FFF3A0
Asphalt → Dark gray #000 → #424242
Gray → Off #808285 → #D1D3D4
Candlelight → Off #FFDE17 → #D1D3D4
Never use
Blues, greens, purples, reds, or any color outside the brand palette — even in gradients.

Data visualization rules

  • ✓ Candlelight yellow is the primary data accent — use for the most important data series.
  • ✓ Use Asphalt and gray scale for secondary and supporting series.
  • ✓ Gradients permitted only within brand palette tones — see approved gradient list above.
  • ✓ Tables: Asphalt header / Yellow text · Candlelight key row · Off/White alternating rows.
  • ✗ No 3D charts, bevels, or drop shadows on chart elements.
  • ✗ No out-of-palette colors (blues, greens, purples, reds) in any chart or visualization.
04 — Visual Language
Icons & Shapes
All icons are outline/line style — stroke only, no solid fills on the icon body. Stroke weight 1.5–2px at display size. Rounded line caps. Design on a 24×24 or 32×32px grid.

Brand shape language

Hard square
No border radius
Circle
Avatars & tags
Accent bar
h=8px
Rule line
h=1–2px

Shape rule

Mr. Pave uses hard corners (no border radius) on most graphic elements. Reserve rounded corners only for tags and badges.

05 — UI Components
Button & UI Styles
Yellow + black text is always the primary button. Never white text on yellow. Flat design — no shadows, no gradients on UI components.
Primary CTA
Dark
Outline
BadgesActive projectCompletedPendingApprovedOn hold
On dark bg
06 — Favicon
Favicon Specs
The favicon uses the bicolor stacked logo — white + yellow on Asphalt black. Export in all required sizes to ensure correct rendering across browsers, devices, and platforms. Never use the horizontal logo as a favicon.
Browser tab / Taskbar
16×16 · 32×32 · 48×48
PNG / ICO
For browser tabs, bookmarks and taskbar shortcuts
Apple Touch Icon
180×180
PNG
Recommended for Apple touch icons (iOS devices)
Android / PWA
192×192 · 512×512
PNG
Required for Android and Progressive Web App manifest files
Modern Browsers
Scalable
SVG
Recommended for modern browsers — single scalable file

Alternative — black + yellow on white background

Browser tab / Taskbar
16×16 · 32×32 · 48×48
PNG / ICO
Apple Touch Icon
180×180
PNG
Android / PWA
192×192 · 512×512
PNG
Modern Browsers
Scalable
SVG

Favicon rules

  • ✓ Always use the bicolor stacked logo — white + yellow on Asphalt black background.
  • ✓ The black background ensures visibility on both light and dark browser chrome.
  • ✓ Export all required sizes: 16×16, 32×32, 48×48 (ICO/PNG) · 180×180 (Apple) · 192×192 & 512×512 (Android/PWA) · SVG.
  • ✗ Never use a transparent background — the logo disappears on dark browser tabs.
  • ✗ Never use the horizontal logo as a favicon — it becomes illegible at small sizes.
07 — Layout System
Spacing & Layout
8px base grid. All spacing is a multiple of 4 or 8. 12-column layout, 980px max width, 32px outer padding.
TokenValueUsageVisual
12-Column Grid — 980px max · 32px gutters
Common layouts
3 col
3 col
3 col
3 col
4 col
4 col
4 col
6 col
6 col

Output sizes

Instagram feed
1080×1080px
Instagram story
1080×1920px
FB / LinkedIn
1200×630px
Email header
600×200px
Presentation
1920×1080px
Banner wide
1456×180px
08 — Brand Voice & CTAs
Voice & CTAs
Direct, plain-spoken, quietly confident. Lead with the customer's outcome. The tagline appears in all marketing footers.

Brand Personality

Mr. Pave is reliable, results-driven, and client-focused, using advanced systems to track progress, set measurable goals, and deliver tangible outcomes. We take pride in delivering exceptional patchwork and paving solutions with an unwavering commitment to quality, safety, and integrity.

People come first. Whether it's our clients, employees, or community partners, we believe strong relationships are the foundation of lasting success. We are professional in everything we do, continuously seeking growth, improvement, and innovation while staying focused on delivering measurable results.

We speak with confidence, professionalism, and warmth — like an experienced friend guiding you toward the best solution. Our communication is clear, honest, and approachable, making even complex projects easy to understand.

Voice characteristics & messaging

01 — Trustworthy & Transparent

We build long-term relationships by being upfront and honest. Our clients trust us because we deliver what we promise — no surprises, only results. Through advanced technology, we provide real-time updates so clients can see exactly what we're doing at every stage of the project, creating confidence and peace of mind.

02 — Professional, Yet Approachable

We are experts in our field, but we don't overcomplicate things. We explain our process in a clear and practical way so clients always know what to expect. Whether it's a small repair or a major restoration, we communicate with clarity, respect, and confidence.

03 — Committed to Quality & Safety

Pavement repair isn't just about appearance — it's about protecting people and creating long-lasting infrastructure. We use proven methods, premium materials, and precision workmanship to deliver durable solutions that stand the test of time.

04 — Community-Focused & Responsible

Our work extends beyond asphalt and concrete — it helps shape the communities where people live, work, and grow. We approach every project with responsibility and purpose because we know our work impacts daily life. We proudly support local organizations, youth programs, and community initiatives because building stronger communities is part of who we are.

05 — Innovative & Cost-Efficient

We continuously look for smarter ways to improve efficiency, reduce costs, and minimize environmental impact without compromising quality. We embrace technology and innovation to provide better experiences and better outcomes for every client.

06 — People First

Our business is built around people. We value our employees, invest in their development, and treat every client with respect and care. We believe exceptional service starts with a culture that puts people before projects.

07 — Growth & Results Focused

We never settle for average. We pursue continuous improvement in our people, processes, and performance. We set measurable goals, hold ourselves accountable, and focus on delivering meaningful results. Success is measured not only by completed projects but by the lasting value we create and the trust we earn.

Tone principles
Direct — No hype. Lead with the answer.
Customer-centric — "Your project, your timeline."
Quietly confident — Credentials speak, no overselling.
TaglineYour Project, Our Faithful Commitment.
Company facts (verbatim)
Phone: (833) 384-7080
Email: info@mrpave.com
HQ: 3127 Carroll Ave., Lynchburg, VA 24501
Locations: Lynchburg · Northern VA (Reston) · Virginia Beach
Award: 2025 Top Contractor Award

Standard CTA buttons

GoalLabelLinkPreview
09 — Brand Assets
Brand Assets on Drive
All approved brand files live on the Mr. Pave Google Drive. Each card opens its folder in a new tab — download files individually or use Drive's "Download all" option to grab the whole folder as a .zip. Folder URLs are permanent — bookmark with confidence.

How to use these folders

  • 1. Click a card → the folder opens in a new tab on Google Drive.
  • 2. Right-click a file → Download, or open the folder menu (top right) → Download all to zip the entire folder.
  • 3. Sign in with your @mrpave.com account if you hit a permissions screen.
  • 4. If access is denied, click "Request access" — an admin will approve.
  • ✓ Folder URLs are permanent. Adding, renaming or moving files inside a folder does not break these links.
  • ✗ Do not move the folders themselves at the Drive root — that would change their parent path (the share URL still works, but breadcrumb navigation may confuse users).
10 — Claude Skills
Design Skills
Pre-built Claude skills that apply the Mr. Pave brand system automatically. Download each skill as a .zip (or .md for single-file skills) and load it into Claude to generate brand-consistent landing pages, app screens, social graphics, and image prompts on demand.
★ Foundation .zip
mrpave-brand

The master brand reference — complete Logo, Sizing & Clear Space, Colors, Typography, Data Viz, Icons, UI, Favicon, Spacing, and Voice rules. This is the source of truth every other Mr. Pave skill builds on. Use whenever ANY brand content is being created or audited.

Folder · SKILL.md (~450 lines)
Download .zip
Landing pages .zip
mr.pave-design-landingpage

Builds Mr. Pave service or campaign landing pages using the proven pedestrian-safety reference layout — full-image hero, two-column intro, services grid, mid-page CTA, site-walk checklist, why-section, process steps, and final CTA.

Folder · SKILL.md + references/
Download .zip
Graphic design .md
mrpave-graphic-design

Brand-consistent graphic assets — social posts, flyers, presentations, infographics, illustrations, icons, email headers, and print collateral. Applies the full graphic design system: Candlelight yellow, flat design, line iconography, yellow-highlight typography.

Single file · SKILL.md
Download .md
App screens .zip
mr.pave-design-app

Design and build screens for the Mr. Pave internal application — operations dashboards, jobs lists, estimate and job-creation forms, detail pages, and crew views. Applies the dark-theme app design system with card layouts, status pills, KPI tiles, and Open Sans typography.

Folder · SKILL.md + references/
Download .zip
Slide decks .zip
mrpave-presentation

Build Mr. Pave-branded presentations and export to PowerPoint (.pptx, .ppt) and Keynote (.key). Clean, premium 16:9 decks — primarily white slides, generous margins, yellow/black accents, dark slides for emphasis, image placeholders where photos go.

Folder · SKILL.md + references/
Download .zip
Bid proposals .md
mrpave-proposal-design

Create branded HTML proposal documents for Mr. Pave bids — utility restoration, mill & pave, municipal contracts, commercial, residential. Hero photo cover, yellow band with chevron, trust strip, scoped sections, pricing table, project approach steps, core values, awards, and contact footer.

Single file · SKILL.md
Download .md

How to load a skill

  • 1. Download the .zip (or .md) for the skill you need.
  • 2. Unzip into your Claude skills directory, or upload the file to Claude directly.
  • 3. Trigger the skill by describing what you want — e.g. "make a landing page for ADA compliance" or "design a social post about sealcoating."
  • 4. Each skill auto-applies the Mr. Pave brand system documented on this page.